<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合肥地名网 - 全屏地图</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '2bd0fbf10ba866d7b256bf0c0ef3c554',
        }
    </script>
    <script type="text/javascript" 
        src="https://webapi.amap.com/maps?v=2.0&key=d17c17f8f712c81a7e4241aff4faa7b0&plugin=AMap.Scale,AMap.ToolBar,AMap.ControlBar,AMap.MouseTool,AMap.PolyEditor,AMap.RangingTool,AMap.Traffic,AMap.HawkEye">
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden;
        }

        #map-container {
            width: 100vw;
            height: 100vh;
        }

        .map-tools {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 100;
            background: rgba(255, 255, 255, 0.9);
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            max-height: 90vh;
            overflow-y: auto;
        }

        .tool-group {
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }

        .tool-group:last-child {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
        }

        .tool-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 5px;
            padding: 8px 12px;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            color: #374151;
            white-space: nowrap;
        }

        .tool-button:hover {
            background: #e5e7eb;
            transform: translateY(-1px);
        }

        .tool-button.active {
            background: #3b82f6;
            color: white;
            border-color: #2563eb;
        }

        .return-button {
            position: absolute;
            bottom: 300px;  /* 调整到缩放按钮上方 */
            right: 20px;
            z-index: 100;
            background: white;
            padding: 10px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            transition: all 0.2s;
        }

        .return-button:hover {
            background: #f3f4f6;
            transform: translateY(-2px);
        }

        .route-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 100;
            background: rgba(255, 255, 255, 0.95);
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            width: 300px;
            display: none;
        }

        .route-input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
        }

        .route-type-button {
            padding: 6px 12px;
            margin: 0 5px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            cursor: pointer;
            background: white;
        }

        .route-type-button.active {
            background: #3b82f6;
            color: white;
            border-color: #2563eb;
        }

        .info-window-content {
            padding: 15px;
            max-width: 300px;
        }

        .info-window-input {
            width: 100%;
            padding: 8px;
            margin: 8px 0;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 14px;
        }

        .info-window-button {
            background: #3b82f6;
            color: white;
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 8px;
        }

        .info-window-button:hover {
            background: #2563eb;
        }

        .marker-title {
            font-weight: bold;
            margin-bottom: 4px;
        }

        .marker-description {
            color: #666;
            margin-bottom: 8px;
        }

        .hawk-eye-container {
            position: absolute;
            bottom: 20px;
            left: 20px;
            z-index: 100;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
            width: 200px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="map-container"></div>

    <!-- 工具面板 -->
    <div class="map-tools">
        <!-- 基础绘制工具 -->
        <div class="tool-group">
            <h3 class="text-sm font-semibold mb-2">绘制工具</h3>
            <button class="tool-button" id="drawPointBtn">
                <i class="fas fa-map-pin"></i>添加点
            </button>
            <button class="tool-button" id="drawLineBtn">
                <i class="fas fa-draw-polygon"></i>绘制线
            </button>
            <button class="tool-button" id="drawPolygonBtn">
                <i class="fas fa-vector-square"></i>绘制面
            </button>
        </div>

        <!-- 测量工具 -->
        <div class="tool-group">
            <h3 class="text-sm font-semibold mb-2">测量工具</h3>
            <button class="tool-button" id="measureDistanceBtn">
                <i class="fas fa-ruler"></i>测距
            </button>
            <button class="tool-button" id="measureAreaBtn">
                <i class="fas fa-chart-area"></i>测面积
            </button>
        </div>

        <!-- 视图控制 -->
        <div class="tool-group">
            <h3 class="text-sm font-semibold mb-2">视图控制</h3>
            <button class="tool-button" id="toggle3DBtn">
                <i class="fas fa-cube"></i>3D视图
            </button>
            <button class="tool-button" id="satelliteBtn">
                <i class="fas fa-satellite"></i>卫星图
            </button>
            <button class="tool-button" id="trafficBtn">
                <i class="fas fa-car"></i>路况
            </button>
            <button class="tool-button" id="clearBtn">
                <i class="fas fa-trash"></i>清除
            </button>
        </div>
    </div>

    <!-- 返回按钮 -->
    <a href="index.html" class="return-button">
        <i class="fas fa-arrow-left"></i>
        返回主页
    </a>

    <!-- 鹰眼视图容器 -->
    <div id="hawk-eye-container" class="hawk-eye-container"></div>

    <script>
        // 全局变量存储地图实例
        let map;
        // 存储当前打开的信息窗体
        let currentInfoWindow;
        // 存储当前选中的标记
        let currentMarker;

        // 等待API加载完成
        window.onload = function() {
            // 初始化地图
            map = new AMap.Map('map-container', {
                zoom: 12,
                center: [117.227239, 31.820587],
                viewMode: '3D',
                pitch: 0
            });

            // 确保插件加载完成
            AMap.plugin([
                'AMap.Scale',
                'AMap.ToolBar',
                'AMap.ControlBar',
                'AMap.MouseTool',
                'AMap.PolyEditor',
                'AMap.Traffic',
                'AMap.HawkEye'
            ], function() {
                // 添加地图控件
                map.addControl(new AMap.ToolBar({
                    position: 'RB'
                }));
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.ControlBar({
                    position: {
                        right: '10px',
                        top: '10px'
                    }
                }));

                // 鼠标工具
                let mouseTool = new AMap.MouseTool(map);
                let currentTool = null;

                // 重置工具按钮状态
                function resetToolButtons() {
                    document.querySelectorAll('.tool-button').forEach(btn => {
                        btn.classList.remove('active');
                    });
                    if (currentTool) {
                        mouseTool.close();
                        currentTool = null;
                    }
                }

                // 绘制工具事件处理
                document.getElementById('drawPointBtn').onclick = function() {
                    resetToolButtons();
                    this.classList.add('active');
                    mouseTool.marker({
                        icon: new AMap.Icon({
                            size: new AMap.Size(25, 34),
                            imageSize: new AMap.Size(25, 34),
                            image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
                        }),
                        animation: 'AMAP_ANIMATION_DROP'
                    });
                    currentTool = 'marker';
                };

                document.getElementById('drawLineBtn').onclick = function() {
                    resetToolButtons();
                    this.classList.add('active');
                    mouseTool.polyline();
                    currentTool = 'polyline';
                };

                document.getElementById('drawPolygonBtn').onclick = function() {
                    resetToolButtons();
                    this.classList.add('active');
                    mouseTool.polygon();
                    currentTool = 'polygon';
                };

                // 测量工具
                document.getElementById('measureDistanceBtn').onclick = function() {
                    resetToolButtons();
                    this.classList.add('active');
                    mouseTool.rule();
                    currentTool = 'rule';
                };

                document.getElementById('measureAreaBtn').onclick = function() {
                    resetToolButtons();
                    this.classList.add('active');
                    mouseTool.measureArea();
                    currentTool = 'measureArea';
                };

                // 3D视图控制
                let is3D = false;
                document.getElementById('toggle3DBtn').onclick = function() {
                    is3D = !is3D;
                    this.classList.toggle('active');
                    map.setPitch(is3D ? 60 : 0);
                };

                // 初始化图层
                let satelliteLayer = new AMap.TileLayer.Satellite();
                let roadNetLayer = new AMap.TileLayer.RoadNet();
                let trafficLayer = new AMap.TileLayer.Traffic({
                    zIndex: 10,
                    zooms: [6, 20]
                });

                // 初始化鹰眼视图
                let hawkEye = new AMap.HawkEye({
                    autoMove: true,
                    showRectangle: true,
                    showButton: true,
                    visible: true,
                    mapStyle: 'amap://styles/grey',
                    bounded: false,
                    container: 'hawk-eye-container'
                });

                // 添加鹰眼到地图
                map.addControl(hawkEye);

                // 卫星图层控制
                document.getElementById('satelliteBtn').onclick = function() {
                    this.classList.toggle('active');
                    if (this.classList.contains('active')) {
                        map.add([satelliteLayer, roadNetLayer]);
                    } else {
                        map.remove([satelliteLayer, roadNetLayer]);
                    }
                };

                // 路况图层控制
                document.getElementById('trafficBtn').onclick = function() {
                    this.classList.toggle('active');
                    if (this.classList.contains('active')) {
                        trafficLayer.show();
                    } else {
                        trafficLayer.hide();
                    }
                };

                // 添加路况图层
                map.add(trafficLayer);
                trafficLayer.hide(); // 默认隐藏路况图层

                // 清除按钮
                document.getElementById('clearBtn').onclick = function() {
                    resetToolButtons();
                    map.clearMap();
                };

                // 监听绘制完成事件
                mouseTool.on('draw', function(event) {
                    if (event.obj && currentTool === 'marker') {
                        let marker = event.obj;
                        
                        // 保存标记的初始数据
                        marker.setExtData({
                            title: '',
                            description: '',
                            position: marker.getPosition()
                        });

                        // 创建并打开信息窗体
                        openInfoWindow(marker);
                    }
                    resetToolButtons();
                });

                // 创建信息窗体内容
                function createInfoWindowContent(marker) {
                    let div = document.createElement('div');
                    div.className = 'info-window-content';
                    
                    let data = marker.getExtData() || {};
                    
                    div.innerHTML = `
                        <div class="marker-info">
                            <input type="text" class="info-window-input" id="markerTitle" 
                                placeholder="输入标题" value="${data.title || ''}">
                            <textarea class="info-window-input" id="markerDescription" 
                                placeholder="输入描述" rows="3">${data.description || ''}</textarea>
                            <div style="display: flex; gap: 8px;">
                                <button class="info-window-button save-marker-btn">
                                    保存
                                </button>
                                <button class="info-window-button delete-marker-btn" style="background: #ef4444;">
                                    删除
                                </button>
                            </div>
                        </div>
                    `;

                    // 添加事件监听器
                    setTimeout(() => {
                        // 保存按钮事件
                        div.querySelector('.save-marker-btn').addEventListener('click', () => {
                            saveMarkerInfo(marker);
                        });

                        // 删除按钮事件
                        div.querySelector('.delete-marker-btn').addEventListener('click', () => {
                            deleteMarker(marker);
                        });
                    }, 0);

                    return div;
                }

                // 打开信息窗体
                function openInfoWindow(marker) {
                    // 关闭之前的信息窗体
                    if (currentInfoWindow) {
                        currentInfoWindow.close();
                    }

                    currentMarker = marker;
                    currentInfoWindow = new AMap.InfoWindow({
                        isCustom: true,
                        content: createInfoWindowContent(marker),
                        offset: new AMap.Pixel(0, -30)
                    });

                    // 点击标记时打开信息窗体
                    marker.on('click', () => {
                        currentMarker = marker;
                        openInfoWindow(marker);
                    });

                    currentInfoWindow.open(map, marker.getPosition());
                }

                // 保存标记信息
                function saveMarkerInfo(marker) {
                    let title = document.getElementById('markerTitle').value;
                    let description = document.getElementById('markerDescription').value;
                    
                    // 更新标记的扩展数据
                    marker.setExtData({
                        title: title,
                        description: description,
                        position: marker.getPosition()
                    });

                    // 更新标记的标签
                    if (title) {
                        marker.setLabel({
                            direction: 'top',
                            offset: new AMap.Pixel(0, -5),
                            content: `<div class="marker-title">${title}</div>`
                        });
                    }

                    // 关闭信息窗体
                    if (currentInfoWindow) {
                        currentInfoWindow.close();
                    }
                }

                // 删除标记
                function deleteMarker(marker) {
                    map.remove(marker);
                    if (currentInfoWindow) {
                        currentInfoWindow.close();
                    }
                }

                // 添加行政区划边界
                let districtSearch = new AMap.DistrictSearch({
                    level: 'district',
                    showbiz: false,
                    extensions: 'all'
                });

                districtSearch.search('合肥市', function(status, result) {
                    if (status === 'complete') {
                        let bounds = result.districtList[0].boundaries;
                        let polygon = new AMap.Polygon({
                            path: bounds,
                            strokeColor: '#3366FF',
                            strokeWeight: 2,
                            strokeOpacity: 0.2,
                            fillColor: '#FFF',
                            fillOpacity: 0.4
                        });
                        map.add(polygon);
                    }
                });
            });
        };
    </script>
</body>
</html> 